<template>
  <div>
    <table class="fixed-table">
      <thead>
        <tr>
          <th class="type-col">诊断类型</th>
          <th>结果</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in paginatedData" :key="key">
          <td class="type-col">{{ key }}</td>
          <td v-html="value || '暂无数据' "></td>
        </tr>
      </tbody>
    </table>
    <!-- 添加翻页按钮 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      <button @click="refreshPage" style="background-color: #008CBA;">刷新页面</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        '手诊': '',
        '舌诊': '',
        '眼诊': ''
      },
      currentPage: 1,
      itemsPerPage: 2 // 每页显示的项目数量
    };
  },
  created() {
    this.loadFromLocalStorage();
  },
  computed: {
    // 计算当前页需要展示的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return Object.entries(this.tableData).slice(start, end).reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
    },
    totalPages() {
      // 总页数
      return Math.ceil(Object.keys(this.tableData).length / this.itemsPerPage);
    }
  },
  methods: {
    loadFromLocalStorage() {
      const keys = ['手诊', '舌诊', '眼诊', '心率血氧'];
      keys.forEach(key => {
        let value = localStorage.getItem(key);
        if (value !== null) {
          this.tableData[key] = value;
        }
      });
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    refreshPage() {
      window.location.reload(); // 刷新整个页面
    }
  }
};
</script>

<style scoped>
.fixed-table {
  width: 96%;
  border-collapse: collapse;
  font-size: 30px; /* 调整字体大小 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  background-color: #fff; /* 表格背景色 */
}

.type-col {
  white-space: nowrap; /* 防止文本换行 */
  width: auto; /* 自动调整宽度 */
}

th, td {
  padding: 15px;
  text-align: left;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  border: 1px solid #ddd; /* 更改边框颜色 */
  border-radius: 5px; /* 添加圆角 */
}

thead th {
  background-color: #f2f2f2; /* 表头背景色 */
  color: #333; /* 文字颜色 */
  font-weight: bold; /* 加粗文字 */
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid #ccc; /* 底部加粗边框 */
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

tbody tr:hover {
  background-color: #eaeaea; /* 鼠标悬停时背景色 */
}

/* 翻页按钮样式保持不变 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

/* 新增的刷新按钮样式 */
.pagination button[style*="#008CBA"] {
  background-color: #008CBA; /* 设置刷新按钮的颜色 */
}

.pagination button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 10px;
  font-size: 16px;
}
</style>